<template>
  <div>
    <div style="width: 100%;margin-bottom: 5px">
        <div style="display: flex;justify-content: space-between">
            <div>
                <el-input v-model="search_text"
                          :disabled="showAdvanceSearchVisible"
                          @keydown.enter.native="initMaterial"
                          size="small"
                          style="width: 300px;margin-right: 10px"
                          prefix-icon="el-icon-search"
                          clearable
                          @clear="initMaterial"
                          placeholder="请输入材料名称/简介进行搜索。。。"></el-input>
                <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initMaterial">搜索</el-button>
            </div>
            <div>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddMaterialView">添加材料</el-button>
            </div>
        </div>
    </div>
    <div>
        <el-table
                :data="materials"
                stripe
                border
                size="small"
                style="width: 100%;"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    min-width="5%">
            </el-table-column>
            <el-table-column
                    prop="seq_no"
                    label="序号"
                    align="center"
                    min-width="6%">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="材料名称"
                    min-width="8%">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="材料种类"
                    min-width="8%">
            </el-table-column>
            <el-table-column
                    prop="material_rank_name"
                    label="材料等级"
                    min-width="8%">
            </el-table-column>
            <el-table-column
                    prop="sect_name"
                    label="所属门派"
                    min-width="8%">
            </el-table-column>

            <el-table-column
                    prop="brief_introduction"
                    label="简介"
                    min-width="18%">
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建时间"
                    min-width="12%">
            </el-table-column>

            <el-table-column
                    min-width="10%"
                    prop="isDelete"
                    label="操作">
                <template slot-scope="scope">
                    <div style="display: flex;justify-content: space-around;width: 100%;">
                        <div>
                            <el-button  size="small" type="success" @click="updateHandler(scope.row)">编辑</el-button>
                        </div>
                        <div>
                            <el-button  size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
            <div>
                <el-button size="small" type="danger"
                           :disabled="this.multipleSelection.length===0"
                           @click="deleteMany"
                >批量删除</el-button>
            </div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <table>
                    <tr>
                        <td>
                            <el-tag>材料名称</el-tag>
                        </td>
                        <td>
                            <el-input v-model="material.name" style="margin-left: 6px" size="small" placeholder="请输入材料名称"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-tag>材料等级</el-tag>
                        </td>
                        <td>
                            <el-select size="small" v-model="material.material_rank" placeholder="材料等级" style="margin-left: 8px;margin-right: 8px">
                                <el-option
                                        v-for="item in materials_ranks"
                                        :key="item.id"
                                        :label="item.zh_name"
                                        :value="item.code">
                                </el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-tag>简介</el-tag>
                        </td>
                        <td>
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 4}"
                                    placeholder="请输入材料简介"
                                    v-model="material.brief_introduction">
                            </el-input>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <el-tag>创建日期</el-tag>
                        </td>
                        <td>
                            <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="material.createdate" style="width: 100%;"></el-date-picker>
                        </td>
                    </tr>
                </table>
                <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="doAddorUpdate">确 定</el-button>
                  </span>
            </el-dialog>
            <div>
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes,prev, pager, next, jumper, ->, total"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
    name:"MaterialQuery",
    data(){
        return {
            showAdvanceSearchVisible:false,
            search_text:"",
            total:0,
            size:10,
            currentPage:1,
            dialogVisible:false,
            multipleSelection:[],
            title:"",
            materials:[],
            materials_ranks:[],
            materials_types:[],
            material:{
              id:"",
              name:"",
              material_rank:"",
              brief_introduction:"",
              createdate:"",

            },
            sect_id:JSON.parse(window.sessionStorage.getItem("userInfo")).sect_id
        }
    },
    methods:{
        initMaterial(){
            this.$getRequest("/sys/material/queryMaterial?sect_id="+this.sect_id+"&search_text="+this.search_text+"&currentPage="+this.currentPage+"&size="+this.size).then(resp=>{
                if(resp){
                    this.total = resp.total;
                    this.materials = resp.data;
                }
            });
        },
        //初始化材料类型
        initMaterialType(){
            this.$getRequest("/system/constant/type?type=material_type").then(resp=>{
                if (resp){
                    this.materials_types = resp;
                }
            })
        },
      //初始化材料等级
      initMaterialRank(){
        this.$getRequest("/system/constant/type?type=material_rank").then(resp=>{
          if (resp){
            this.materials_ranks = resp;
          }
        })
      },
        //每页条数事件
        sizeChange(size){
            this.size = size;
            this.initMaterial();
        },
        //当前页事件
        currentChange(currentPage){
            this.currentPage = currentPage;
            this.initMaterial();
        },
        //多选
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //打开编辑窗口
        updateHandler(data){debugger
            this.dialogVisible = true;
            this.material.id = data.id;
            this.material.name = data.name;
            this.material.material_rank = data.material_rank;
            this.material.brief_introduction = data.brief_introduction;
            this.material.createdate = data.createdate;
        },
        //丹方删除
        deleteHandler(data){
            this.$confirm('此操作将永久删除['+data.name+']该材料, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$deleteRequest("/sys/material/"+data.id).then(resp=>{
                    if(resp){
                        this.initMaterial();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //丹方批量删除
        deleteMany(){
            this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个材料, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = "?";
                this.multipleSelection.forEach(item=>{
                    ids+= "ids=" + item.id + "&";
                });
                ids = ids.substring(0,ids.length-1);
                this.$deleteRequest("/sys/material/"+ids).then(resp=>{
                    if(resp){
                        this.initMaterial();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //添加or编辑
        doAddorUpdate() {
            if (this.material.id === '') {
                this.$postRequest("/sys/material/", this.material).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initMaterial();
                        this.material = {
                            id:"",
                            name:"",
                            type:"",
                            material_rank:"",
                            sect_id:"",
                            sect_name:"",
                            brief_introduction:"",
                            createdate:"",
                        }
                    }
                });
            } else {
                this.$putRequest("/sys/material/update", this.material).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initMaterial();
                        this.material = {
                            id:"",
                            name:"",
                            type:"",
                            material_rank:"",
                            sect_id:"",
                            sect_name:"",
                            brief_introduction:"",
                            createdate:"",
                        }
                    }
                })
            }
        },
        //打开add弹窗
        showAddMaterialView(){
            this.material = {
                id:"",
                name:"",
                type:"",
                material_rank:"",
                sect_id:"",
                sect_name:"",
                brief_introduction:"",
                createdate:"",
            }
            this.dialogVisible = true
            this.title ='添加材料'
        },
    },
    mounted() {
      this.initMaterial();
      this.initMaterialRank();
      this.initMaterialType();
    }
}

</script>

<style scoped>

</style>
